<template>
  <div>

      <el-menu router style="border: none" :default-active="$route.path">
        <el-menu-item index="/">
          <template slot="title">
            <i class="el-icon-house"></i>
            <span>系统首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/element">系统首页</el-menu-item>
        <el-menu-item>系统首页</el-menu-item>
        <el-menu-item>系统首页</el-menu-item>
        <el-submenu>
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>信息管理</span>
          </template>
          <el-menu-item>用户信息</el-menu-item>
        </el-submenu>
      </el-menu>

    <!--  <el-row :gutter="10">-->
    <!--    <el-col :span="12" >-->
    <!--      <div style="width: 100%; height: 300px; background-color: dodgerblue"></div>-->
    <!--    </el-col>-->
    <!--    <el-col :span="12">-->
    <!--      <div style="width: 100%; height: 300px; background-color: red"></div>-->
    <!--    </el-col>-->
    <!--  </el-row>-->


    <!--  图标弹性盒-->
    <el-row>
      <el-col :span="4"></el-col>
      /
      <el-col :span="4">
        <div style="padding: 10px;border: solid 1px #ccc; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png">
          <div style="text-align: center">这是一个图标</div>
          <div style="text-align: center;color: red">价格：99.00</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="padding: 10px;border: solid 1px #ccc; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png">
          <div style="text-align: center">这是一个图标</div>
          <div style="text-align: center;color: red">价格：99.00</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="padding: 10px;border: solid 1px #ccc; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png">
          <div style="text-align: center">这是一个图标</div>
          <div style="text-align: center;color: red">价格：99.00</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="padding: 10px;border: solid 1px #ccc; text-align: center">
          <img style="width: 80%" src="@/assets/logo.png">
          <div style="text-align: center">这是一个图标</div>
          <div style="text-align: center;color: red">价格：99.00</div>
        </div>
      </el-col>
    </el-row>

    <!--各种按钮-->
    <el-row>
      <el-col :span="24">
        <el-button type="primary">主要按钮</el-button>
        <el-button type="danger">主要按钮</el-button>
        <el-button type="info">主要按钮</el-button>
        <el-button type="success">主要按钮</el-button>
        <el-button type="warning">主要按钮</el-button>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-col>
    </el-row>

<!--    各种输入框-->
    <el-row style="margin-top: 20px">
      <el-col>
        <el-input style="width: 200px" v-model="value" placeholder="please input your name"></el-input>
        <el-input style="width: 200px" v-model="value" prefix-icon="el-icon-search" placeholder="please input your name"></el-input>
        <el-input clearable style="width: 200px" v-model="value" suffix-icon="el-icon-user" placeholder="please input your name"></el-input>
        <el-input show-password style="width: 200px" v-model="value1" placeholder="please input your password"></el-input>
        <el-input type="textarea" style="width: 200px" v-model="value2"></el-input>
      </el-col>
    </el-row>

<!--    有提示的输入框-->
    <el-row style="margin: 20px 0">
      <el-autocomplete placeholder="请输入内容" :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value4"></el-autocomplete>
    </el-row>

    <el-row>

      <el-select v-model="select" placeholder="" @change="changeSelect">
        <el-option value="香蕉"></el-option>
        <el-option value="菠萝"></el-option>
        <el-option value="橘子"></el-option>
      </el-select>

      <el-select v-model="select" placeholder="" @change="changeSelect">
        <el-option v-for="item in fruits" :key="item.id" :label="item.name" :value="item.name"></el-option>
      </el-select>
    </el-row>
  </div>
</template>

<script lang="ts">
export default {
  name:'Element',
  data(){
    return {
      value : '',
      value1:"",
      value2:"",
      value4:"",
      coffees:[{value:'1星巴克'},{value:'2酷迪'},{value:'3瑞幸'}],
      select:'',
      fruits:[
        {name:'苹果',id:1},
        {name:'橘子',id:2},
        {name:'苹果',id:3},
      ],
      users:[
        {name:'qgg', card:"1111"},
        {name:'qggxd', card:"1112"},
        {name:'qgxm', card:"1113"},
      ]
    }
  },
  methods: {
    querySearch(query,cb){
      let result = query? this.coffees.filter(v => v.value.includes(query)): this.coffees;
      console.log(result);
      cb(result);
    },
    changeSelect(){
      console.log(this.select)
    }
  }
}
</script>